<template>
  <div>
    <div class="page_wrapper">
      <div class="page_wrapper_right">
        <Table
          :setOption="setOption"
          :title="title"
          :tableData="tableData" 
          @add="add"
          @edit="edit"
          @addTableData="addTableData"
          @handleDelete="handleDelete"
          @editTableData="editTableData"
          @checkDelete="checkDelete"
          @moreOperate="moreOperate"
        >
        <template #header>
          <TableSelect placeholder="姓名/手机号码"    @handleSearch="handleSearch"
      @handlereset="handleReset" :options="postMsgData" :props="defineProps"  selectPlaceholder="请选择岗位" />
        </template>
          <el-table-column prop="name" label="姓名" width="160" />
          <el-table-column prop="post" label="所属岗位" >
            <template #default="scope">
              {{getMsg(scope.row.businessType,scope.row.post).post}}
            </template>
          </el-table-column>
          <el-table-column prop="department" label="所属部门">
              <template #default="scope">
              {{getMsg(scope.row.businessType,scope.row.post).department}}
            </template>
          </el-table-column>
          <el-table-column prop="level" label="角色">
              <template #default="scope">
              {{getLevel(scope.row.level)}}
            </template>
          </el-table-column>
             <el-table-column prop="phone" label="电话" />
      
           <template #pagination>
        <el-pagination
          v-model:current-page="query.pageIndex"
          v-model:page-size="query.pageSize"
          :page-sizes="[5, 10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </template>
      <template #dialog>
            <el-form :model="form" label-width="120px">
        <el-form-item label="姓名">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="部门-岗位">
            <el-cascader
            placeholder="选择对应岗位"
      v-model="form.post"
      :options="department"
      @change="handleChange"
    />
        </el-form-item>
         <el-form-item label="电话">
          <el-input v-model="form.phone" />
        </el-form-item>
      <el-form-item label="角色分配">
              <el-radio-group v-model="form.level">
                <el-radio v-for="item in roleMsgData" :key="item" :label="item.level">{{item.roleName}}</el-radio>
              </el-radio-group>
         
        </el-form-item>
        <el-form-item label="状态" >
          <el-switch
            v-model="form.operate"
            inline-prompt
            active-text="是"
            inactive-text="否"
          />
        </el-form-item>
      </el-form>
      </template>
        </Table>
      </div>
      <Dialog
        :isVisible="isVisible"
        :title="optionsTitle"
        @submit="submitList"
        @close="cancel"
        
      >
       确定要重置密码？
       
      </Dialog>
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, toRefs, computed } from "vue";
import { Plus, Edit, ArrowDownBold } from "@element-plus/icons-vue";
import Table from "@/components/Table.vue";
import Dialog from "@/components/Dialog.vue";
import TableSelect from '@/components/TableSelect.vue'
import {getUserdepData} from '@/api/dataList.js'

const defineProps = ref({
    label:'jobName',
    value:'level'
})

// 表单数据
let form = ref({
  name:"",
  businessType:"",
  post:"",
  operate:true,
  level:"",
  phone:"",
})


// 表格操作栏更多选项的数据
const setOption = [
  {
    value: "0",
    label: "重置密码",
  },
];

// 获取角色数据
const roleMsgData = computed(() => {
  return JSON.parse(localStorage.getItem("roleMsgData"))
})

// 获取岗位数据
const postMsgData = computed(() => {
  return JSON.parse(localStorage.getItem("postMsgData"))
})




// 筛选框数据
const options = [
  {
    value: 0,
    label: "当前部门",
  },
  {
    value: 1,
    label: "xx部门",
  },
];

// 表单数据
const tableData = ref([]);

// 是否显示确定按钮
// const showButton = ref(true);

// 记录在操作栏的更多选项中点击的那个按钮
const isOptions = ref('')

// 显示Dialog栏
const isVisible = ref(false);
//修改获新增Dialog栏标题
const title = ref("");

// 设置栏更多操作后标题
const optionsTitle = ref("");
// 分页器数据总数
const total =ref(0)


// cascader栏数据
const department = ref([
  {
    value:1,
     label:"总裁办公室",
     children:[]
  },
  {
    value:2,
    label:"教练组",
    children:[]
  },
  {
    value:3,
    label:"球员部",
    children:[]
  }
])


// 使数据形成cascader所需要的数据格式 
const getPostOptions = () => {
  postMsgData.value.forEach(item => {
    department.value.forEach(i => {
      if(item.businessType == i.value) {
        i.children.push({
          label:item.jobName,
          value:item.level
        })
      }
    })
  })

}


/**
 * @description 根据用户个人的岗位和部门对应的参数获取对应的名称 （使数据具有响应式，修改个人位和部门信息后所有信息对应改变）
 * @param {Number} 部门对应数据
 * @param {Number} 岗位对应数据
 * @returns {Object} post:岗位对应数据所对应的名称;department:部门对应数据所对应名称
 */
const getMsg= (businessType,post) => {
  let data = {
    post:"",
    department:""
  }
  department.value.forEach(item => {
    if(businessType == item.value)  {
      data.department =item.label
      item.children.forEach(i=>{
        if(i.value==post) {
          data.post=i.label;
        }
      })
    }
  })
  return data
}


/**
 * @description 根据个人角色参数获取对应名称（使数据具有响应式，修改角色信息后所有信息对应改变）
 * @param {Number} 角色对应数据
 * @returns {String} 角色对应数据所对应名称
 */
const getLevel = (val) => {
   let data = ""
  roleMsgData.value.forEach(item => {
    if(item.level == val) {
      data = item.roleName
    }
  })
  return data
}

// 点击cascader栏触发
const handleChange = (val) => {
  form.value.businessType = val[0]
  form.value.post = val[1]
  console.log(form.value);
}

// 分页器信息
let query = reactive({
  pageIndex: 1,
  pageSize: 10,
});
onMounted(() => {
  getData()
  getPostOptions()
})

// 获取表单信息
const getData = () => {
  getUserdepData().then(res => {
    tableData.value = res.data.list
    total.value = res.data.pageTotal
  })
}
// 触发搜索按钮
const handleSearch = (selectVal, inputVal) => {
  query.pageIndex = 1;
  query.name = inputVal;
  query.address = selectVal;
  getData(query);
};

// 点击新增按钮
const add = () => {
  title.value = "新增";
  form.value = {}
}

// 点击修改按钮
const edit = (scope,index) => {
  title.value = "修改";
  form.value = {...form.value,...scope}
};

// 修改数据
const editTableData = (val) => {
  tableData.value[val] = {...form.value}
  // 调用修改接口
}

// 删除数据
const handleDelete = (scope,index) => {
tableData.value.splice(index,1)
// 调用删除接口
}

// 新增数据
const addTableData = () => {
tableData.value.push(form.value)
// 调用新增接口
}

// 批量删除
const checkDelete = (data) => {
  data.forEach(item => {
      tableData.value = tableData.value.filter(i => i !==item)
    })
  // 调用批量删除接口
}
   
// 触发重置按钮
const handleReset = (selectVal, inputVal) => {
  query.pageIndex = 1;
  query.name = inputVal;
  query.address = selectVal;
  getData(query);
};



// 点击操作栏更多打开对应的Dialog
const moreOperate = (row,index,command) => {
  isOptions.value = command
  optionsTitle.value = setOption[command].label;
  isVisible.value = true;
  console.log(isOptions.value);
};

// Dialog栏的提交操作
const submitList = () => {
  // 判断是哪一种操作
  if(isOptions.value == '0') { 
    
    // 重置密码的操作
    ElMessage.success('密码重置成功')
  } 
  isVisible.value = false
}

// 取消操作
const cancel = () => {
  isVisible.value = false;
};

// 修改每页输出数量
const handleSizeChange = (val) => {
  //控制每页输出的数量
  query.pageSize = val;
  console.log(`${val} items per page`);
};
//修改当前页数
const handleCurrentChange = (val) => {
  // 调用接口 根据每页输出的数量和当前页码返回对应的数据
  query.pageIndex = val;
  console.log(`current page: ${val}`);
};
</script>

<style lang="scss" scoped>
.el-table .stop {
  color: #fff;
}
.operate-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
}
.page_wrapper {
  display: flex;
  &:deep(.el-table__cell) {
    padding: 0;
  }
  &_lef {
    width: 200px;
    margin-right: 10px;
    background: #fff;
    .dep_box {
      // border: 1px solid #dfdfdf;
      min-height: 300px;
    }
    .dep_title {
      padding: 5px 10px;
      border-bottom: 1px solid #dfdfdf;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .dep_tree {
      padding: 10px 0;
    }
  }
  &_right {
    flex: 1;
    background: #fff;
    min-height: 300px;
  }
}
</style>

